/**用于选择区间范围 大于某数 小于某数 等于某数 两者之间 */
const ParamStandRange = defineComponent({
  namel: 'ParamStandRange',
  props: {
    defaultRange: {
      type: String,
      default: '',
    },
  },
  emits: ['change'],
  setup(props, {emit}) {
    let rangeOptions = [
      {label: '大于', value: '>'},
      {label: '小于', value: '<'},
      {label: '等于', value: '='},
      {label: '两者之间', value: '-'},
    ]
    let rangeTarget = ref('>')
    let rangeStart = ref('')
    let rangeEnd = ref('')

    watch(
      () => rangeTarget.value,
      n => {
        if (n === '-') {
          emit(
            'change',
            (rangeStart.value[0] || '') + n + (rangeEnd.value[1] || '')
          )
        } else {
          emit('change', n + (rangeStart.value[0] || ''))
        }
      }
    )

    watch(
      () => [rangeStart.value, rangeEnd.value],
      n => {
        if (rangeTarget.value === '-') {
          emit('change', (n[0] || '') + rangeTarget.value + (n[1] || ''))
        } else {
          emit('change', rangeTarget.value + (n[0] || ''))
        }
      }
    )

    /**拆分传进来的parameRange */
    const splitParameRange = () => {
      console.log(props)
      let {defaultRange} = toRefs(props)
      if (!defaultRange.value) return
      rangeOptions.forEach(option => {
        if (defaultRange.value.indexOf(option.value) !== -1) {
          rangeTarget.value = option.value
          switch (option.value) {
            case '>':
            case '<':
            case '=':
              rangeStart.value = defaultRange.value.split(option.value)[1]
              return
            case '-':
              rangeStart.value = defaultRange.value.split('-')[0]
              rangeEnd.value = defaultRange.value.split('-')[1]
              return
          }
        }
      })
    }

    onMounted(() => {
      splitParameRange()
    })

    return () => {
      let RangeValueDom
      if (rangeTarget.value === '-') {
        RangeValueDom = (
          <div class="col-span-2 grid grid-cols-2 mx-1">
            <a-form-item
              class="mx-1 my-0"
              labelCol={{span: 0}}
              wrapperCol={{span: 24}}
            >
              <a-input
                v-model={[rangeStart.value, 'value']}
                placeholder="输入范围值"
              ></a-input>
            </a-form-item>
            <a-form-item
              class="mx-1 my-0"
              labelCol={{span: 0}}
              wrapperCol={{span: 24}}
            >
              <a-input
                v-model={[rangeEnd.value, 'value']}
                placeholder="输入范围值"
              ></a-input>
            </a-form-item>
          </div>
        )
      } else {
        RangeValueDom = (
          <div class="col-span-2 mx-1">
            <a-form-item
              class="mx-1 my-0"
              labelCol={{span: 0}}
              wrapperCol={{span: 24}}
            >
              <a-input
                v-model={[rangeStart.value, 'value']}
                placeholder="输入范围值"
              ></a-input>
            </a-form-item>
          </div>
        )
      }
      return (
        <div class="h-full grid grid-cols-3">
          <a-select
            v-model={[rangeTarget.value, 'value']}
            placeholder="选择范围"
            options={rangeOptions}
          ></a-select>
          {RangeValueDom}
        </div>
      )
    }
  },
})
export default ParamStandRange
